<!DOCTYPE html>
<html>

<head>
    <!--编码-->
    <meta charset="utf-8"/>
    <title>小马模拟购物网站</title>
    <!--作者信息-->
    <meta name="author" content="xiaoma,http://y.dobit.top/"/>
    <!--网页描述-->
    <meta name="description" content="imitateWeb"/>
    <!--关键字-->
    <meta name="keywords" content="shopping,web"/>
    <meta name="copyright" content="xiaoma所有"/>

    <!--以下meta属性根据自己的需要选择使用-->
    <!--网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引-->
    <!--content的参数有all,none,index,noindex,follow,nofollow，默认是all-->
    <meta name="robots" content="no"/>
    <!--设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅-->
    <meta http-equiv="expires" content="Wed, 26 Feb 2027 08：21：57 GMT"/>
    <!--禁止浏览器从本地机的缓存中调阅页面内容-->
    <meta http-equiv="Pragma" content="no-cache"/>
    <!--用来防止别人在框架里调用你的页面-->
    <meta http-equiv="Window-target" content="_top"/>
    <!--页面重定向，5s后跳转到新的url:http://www.baidu.com/-->
    <!--<meta http-equiv="refresh" content="5;url=http://www.baidu.com/" />-->
    <!--网页不会被缓存-->
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate"/>
    <!--通知IE采用其所支持的最新的模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--打开网页，顶部标签页右侧显示图标-->
    <link rel="Shortcut Icon" href="img/horse.ico">
    <!--引入外部样式表-->
    <link rel="stylesheet" href="css/resetcss.css"/>
    <link rel="stylesheet" href="css/main.css"/>
</head>

<body>
<div id="header">
    <ul id="leftlist" class="list">
        <li><a href="#" class="link">请登录</a></li>
        <li><a href="#" class="link">免费注册</a></li>
    </ul>
    <ul id="rightlist" class="list">
        <li class="haschild">
            <a href="#" class="link" title="myorders">我的订单
            </a>
            <ul class="showdetail">
                <li><a href="#" class="item">全部订单</a></li>
                <li><a href="#" class="item">待付款订单</a></li>
                <li><a href="#" class="item">待收货订单</a></li>
                <li><a href="#" class="item">待评价订单</a></li>
            </ul>
        </li>
        <li><a href="#" class="link">购物车</a></li>
        <li class="haschild"><a href="#" class="link">收藏夹
        </a>
            <ul class="showdetail">
                <li><a href="#" class="item">收藏的商品</a></li>
                <li><a href="#" class="item">收藏的店铺</a></li>
            </ul>
        </li>
        <li><a href="#" class="link">商品分类</a></li>
        <li class="haschild">
            <a href="#" class="link">网站导航
            </a>

            <div class="showdetail biglist">
                <div class="listblock">
                    <h2 class="shoptitle">主题市场</h2>
                    <ul>
                        <li><a href="#" class="items">女装</a></li>
                        <li><a href="#" class="items">男装</a></li>
                        <li><a href="#" class="items">鞋靴</a></li>
                        <li><a href="#" class="items">箱包</a></li>
                        <li><a href="#" class="items">母婴</a></li>
                        <li><a href="#" class="items">美妆</a></li>
                        <li><a href="#" class="items">户外</a></li>
                        <li><a href="#" class="items">食品</a></li>
                        <li><a href="#" class="items">珠宝</a></li>
                    </ul>
                </div>
                <div class="listblock centerblock">
                    <h2 class="shoptitle">特色市场</h2>
                    <ul>
                        <li><a href="#" class="items">女装</a></li>
                        <li><a href="#" class="items">男装</a></li>
                        <li><a href="#" class="items">鞋靴</a></li>
                        <li><a href="#" class="items">箱包</a></li>
                        <li><a href="#" class="items">母婴</a></li>
                        <li><a href="#" class="items">美妆</a></li>
                        <li><a href="#" class="items">户外</a></li>
                        <li><a href="#" class="items">食品</a></li>
                        <li><a href="#" class="items">珠宝</a></li>
                    </ul>
                </div>
                <div class="listblock">
                    <h2 class="shoptitle">跳骚市场</h2>
                    <ul>
                        <li><a href="#" class="items">女装</a></li>
                        <li><a href="#" class="items">男装</a></li>
                        <li><a href="#" class="items">鞋靴</a></li>
                        <li><a href="#" class="items">箱包</a></li>
                        <li><a href="#" class="items">母婴</a></li>
                        <li><a href="#" class="items">美妆</a></li>
                        <li><a href="#" class="items">户外</a></li>
                        <li><a href="#" class="items">食品</a></li>
                        <li><a href="#" class="items">珠宝</a></li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>
<div id="content">
    <!--搜索框-->
    <div id="search">
        <input type="text" id="select" placeholder="请输入搜索文字..."/>
        <button type="button" id="btnquery">搜索</button>
    </div>
    <!--左侧导航菜单-->
    <div id="catalog">
        <h2 id="goods">商品分类</h2>

        <div class="catalog">
            <h3>推荐品牌</h3>
            <ul>
                <li><a href="#" class="linkbrand">韩都衣舍</a></li>
                <li><a href="#" class="linkbrand">蘑菇小象</a></li>
                <li><a href="#" class="linkbrand">西西小可</a></li>
                <li><a href="#" class="linkbrand hotgood">衣品天城</a></li>
                <li><a href="#" class="linkbrand">pony</a></li>
                <li><a href="#" class="linkbrand">vans</a></li>
                <li><a href="#" class="linkbrand">七格格</a></li>
                <li><a href="#" class="linkbrand">zara</a></li>
            </ul>
            <h3>衣服</h3>
            <ul>
                <li><a href="#" class="linkbrand">外套</a></li>
                <li><a href="#" class="linkbrand hotgood">毛衣</a></li>
                <li><a href="#" class="linkbrand">牛仔裤</a></li>
                <li><a href="#" class="linkbrand">打底裤</a></li>
                <li><a href="#" class="linkbrand">T恤</a></li>
                <li><a href="#" class="linkbrand">羽绒服</a></li>
                <li><a href="#" class="linkbrand">衬衫</a></li>
                <li><a href="#" class="linkbrand">内衣</a></li>
            </ul>
            <h3>箱包</h3>
            <ul>
                <li><a href="#" class="linkbrand">行李箱</a></li>
                <li><a href="#" class="linkbrand">单肩包</a></li>
                <li><a href="#" class="linkbrand">双肩包</a></li>
                <li><a href="#" class="linkbrand">钱包</a></li>
                <li><a href="#" class="linkbrand">手提包</a></li>
                <li><a href="#" class="linkbrand">男包</a></li>
                <li><a href="#" class="linkbrand hotgood">女包</a></li>
                <li><a href="#" class="linkbrand">斜挎包</a></li>
            </ul>
            <h3>美食</h3>
            <ul>
                <li><a href="#" class="linkbrand">干果</a></li>
                <li><a href="#" class="linkbrand">进口食品</a></li>
                <li><a href="#" class="linkbrand">牛奶</a></li>
                <li><a href="#" class="linkbrand">巧克力</a></li>
                <li><a href="#" class="linkbrand">王老五</a></li>
                <li><a href="#" class="linkbrand">面包</a></li>
                <li><a href="#" class="linkbrand hotgood">火腿肠</a></li>
                <li><a href="#" class="linkbrand">cookies</a></li>
            </ul>
        </div>
    </div>
    <div id="menus">
        <ul>
            <li><a href="#" class="menu">服装馆</a></li>
            <li><a href="#" class="menu">科技馆</a></li>
            <li><a href="#" class="menu">美妆馆</a></li>
            <li><a href="#" class="menu">超市</a></li>
            <li><a href="#" class="menu">本地购</a></li>
        </ul>
    </div>
    <div id="turnimg">
        <ul id="imgs">
            <li><a href="#"><img src="img/1.jpg"/></a></li>
            <li><a href="#"><img src="img/2.jpg"/></a></li>
            <li><a href="#"><img src="img/3.jpg"/></a></li>
            <li><a href="#"><img src="img/4.jpg"/></a></li>
        </ul>
        <ul id="circles">
            <li class="currimg" data-num="0"></li>
            <li class="circle" data-num="1"></li>
            <li class="circle" data-num="2"></li>
            <li class="circle" data-num="3"></li>
        </ul>
        <div class="arr left" id="arrL">
            <div id="leftarr"></div>
        </div>
        <div class="arr right" id="arrR">
            <div id="rightarr"></div>
        </div>
    </div>
    <div id="notice">
        <div id="status">
            <h1>最新动态<a href="#" id="more">查看更多</a></h1>
            <ul>
                <li><a href="#" class="notice"><span>[活动1]&nbsp;&nbsp;</span>双11，0元大抢购</a></li>
                <li><a href="#" class="notice"><span>[活动2]&nbsp;&nbsp;</span>双12，商品预购中</a></li>
                <li><a href="#" class="notice"><span>[活动3]&nbsp;&nbsp;</span>新鲜水果本地送，免邮费</a></li>
                <li><a href="#" class="notice"><span>[活动4]&nbsp;&nbsp;</span>电器以旧换新</a></li>
                <li><a href="#" class="notice"><span>[活动5]&nbsp;&nbsp;</span>品牌联合满减购</a></li>
            </ul>
        </div>
        <div id="tabs">
            <ul>
                <li><a href="#" class="tab border activelink">话费</a>

                    <div class="tabctn active">
                        <p><label for="tel">号码：</label><input type="text" id="tel"/></p>

                        <p><label for="money">面值：</label><select id="money">
                            <option>100元</option>
                            <option>50元</option>
                            <option>30元</option>
                            <option>20元</option>
                            <option>10元</option>
                        </select></p>
                        <p>
                            <button type="button">充值</button>
                        </p>
                    </div>
                </li>
                <li><a href="#" class="tab border">机票</a>

                    <div class="tabctn">
                        <p><label for="start">出发：</label><input type="text" id="start"/></p>

                        <p><label for="end">达到：</label><input type="text" id="end"/></p>

                        <p><label for="date">日期：</label><input type="datetime-local" id="date"/></p>

                        <p>
                            <button type="button">查找</button>
                        </p>
                    </div>
                </li>
                <li><a href="#" class="tab border">电影</a>

                    <div class="tabctn">
                        <p><label for="film">电影名称：</label><input type="text" id="film"/></p>

                        <p><label for="fdate">日期：</label><input type="date" id="fdate"/></p>

                        <p><label for="ftime">时间：</label><input type="time" id="ftime"/></p>

                        <p>
                            <button type="button">购买</button>
                        </p>
                    </div>
                </li>
                <li><a href="#" class="tab">旅游</a>

                    <div class="tabctn">
                        <p><label for="tourist ">景点名称：</label><input type="text" id="tourist "/></p>

                        <p><label for="traveldate">日期：</label><input type="date" id="traveldate"/></p>
                        <button type="button">购买</button>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="showgoods">
        <ul>
            <li><a href="good.html" target="_blank"><img src="img/1.png"></a></li>
            <li><a href="goodDetail.html" target="_blank"><img src="img/2.png"></a></li>
            <li><a href="good.html" target="_blank"><img src="img/3.png"></a></li>
            <li><a href="goodDetail.html" target="_blank"><img src="img/4.png"></a></li>
            <li><a href="good.html" target="_blank"><img src="img/5.png"></a></li>
            <li><a href="goodDetail.html" target="_blank"><img src="img/1.png"></a></li>
            <li><a href="good.html" target="_blank"><img src="img/2.png"></a></li>
            <li><a href="goodDetail.html" target="_blank"><img src="img/3.png"></a></li>
            <li><a href="good.html" target="_blank"><img src="img/4.png"></a></li>
            <li><a href="goodDetail.html" target="_blank"><img src="img/5.png"></a></li>
            <li><a href="good.html" target="_blank"><img src="img/1.png"></a></li>
            <li><a href="goodDetail.html" target="_blank"><img src="img/2.png"></a></li>
            <li><a href="good.html" target="_blank"><img src="img/3.png"></a></li>
            <li><a href="goodDetail.html" target="_blank"><img src="img/4.png"></a></li>
            <li><a href="good.html" target="_blank"><img src="img/5.png"></a></li>
            <li><a href="goodDetail.html" target="_blank"><img src="img/1.png"></a></li>
            <li><a href="good.html" target="_blank"><img src="img/2.png"></a></li>
            <li><a href="goodDetail.html" target="_blank"><img src="img/3.png"></a></li>
            <li><a href="good.html" target="_blank"><img src="img/4.png"></a></li>
            <li><a href="goodDetail.html" target="_blank"><img src="img/5.png"></a></li>
        </ul>
    </div>
</div>
<div id="footer">
    All Rights Reserved. xiaomaer 版权所有
</div>
<script src="js/home.js"></script>
</body>

</html>